iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
Modern Web

為期 30 天的 react 大冒險系列 第 3

react 大冒險-快速複習 js 的語法 day 3

  • 分享至 

  • xImage
  •  

本篇的內容關於 destructuring / spread 跟 rest

destructuring

就是從 array 或 object 中,快速拆出想要的值並將值指定給宣告出來的變數

  1. 從物件中拆出值,且新宣告的變數名恰與物件內的名稱相同
const voxel = { x: 2, y: 7.4, z: 9.6 };
let { x, y, z } = voxel;
  1. 從物件中拆出值,新宣告的變數名跟物件內的名稱不同
const pets = { dog: "汪汪", cat: "喵喵" , fish: "..." , snake: "sss" }
let { dog: petA, cat: petB, ...otherPets } = pets;
// petA:複製 dog 的值,指定為 petA
// petB:複製 cat 的值,指定為 petB
// ...otherPets 把剩下的都裝在一起
  1. 巢狀的物件也可以如法炮製,新宣告的變數名跟物件內的名稱不同
    image alt
const linearMovement = {
    startPos: { x: 5, y: 6 },
    endPos: { x: 6, y: -9 }
};

const {startPos: { x: startPosX, y: startPosY } } = linearMovement; 
// 將 linearMovement 中 startPos 的 x 指定到 startPosX 這個變數上(startPosY 同理)
console.log(startPosX, startPosY);  // 5 6 

再更多層的話..
也可以 一層一層解構

const person = {
    name: "Cathy",
    age: 32,
    address: {
        city: "Tainan",
        postCode: 702
    }
}

const { name: firstPerson, address: { city: firstCity , postCode: firstPostCode} } = person;
console.log(firstPerson); // "Cathy"
console.log(firstCity); // "Tainan"
console.log(firstPostCode); // 702 
  1. 除了物件外 陣列也可使用
const [a, b] = [1, 3, 5, 7, 9]; // 從 array 內取值 指定給變數 a , b
console.log(a, b); // a 跟 b 對應到陣列內的前兩位,分別為 1 跟 3 
function sumAndMultiply ( a,b ){
    return [ a+b,a*b ];
}
const [ sumResult,multiplyResult ] = sumAndMultiply( 3,4 );
console.log(sumResult); // 7 (對應 a+b)
console.log(multiplyResult); // 12 (對應 a*b)

  1. 如果要的值不是剛好在陣列的連續位置上,可以插入,改變要取的陣列位置
const [c , , d] = [11,12,13,14];
console.log(c ,d); // 11,13
  1. 傳入整個 object 做為函式的參數,再從 object 取出要的內容
    原本的寫法是這樣..
const profileUpdate = (profileData)=>{
    const {name , age , birthDay} = profileData; // 從傳入的 profileData 物件內取出要的值
    // do something..
}

可以這樣改寫

const profileUpdate = ({name , age , birthDay})=>{
    // do something..
}

rest / spread

兩者外觀都是 ... 三個點符號

rest

簡單來說 就是把剩下的東西裝在一起,另外 rest operator 一定要放在最後方

const [c, ...restNum , d] = [99, 98, 97, 96, 95]; // 會產生錯誤

正確的寫法如下..

const [c, ...restNum] = [99, 98, 97, 96, 95];
console.log(restNum); // [98, 97, 96, 95]

spread

spread operator 可能出現在以下三個位置

  1. function calls
    把內容打散傳進 function 內執行
const nums =[12, 8, 2, -2, 5];
Math.min(...nums); // -2
  1. 把內容打散,建立新陣列 array literial
const petGroupA = [
    { name: 'Birdy', species: "chicken" }, 
    { name: 'Chick', species: "parrot" }, 
    { name: 'Harry', species: "sparrow" }
];
const petGroupB = [
    { name: 'Blackie', species: "dog" },
    { name: 'Sausage', species: "cat" },
    { name: 'Frank', species: "goat" }
];
const mixedPets = [...petGroupA, ...petGroupB];

獲得全新陣列(當然也可以用 mixedPets = petGroupA.concat(petGroupB),結果一樣)
image alt
也可以用此方法快速進行陣列複製 (僅限一層深度的陣列)

const numArr = [12, 8, 2, -2, 5];
const numArr2 = [...numArr];
numArr2.unshift(88); // [88 , 12, 8, 2, -2, 5 ]

image alt

  1. 把內容打散,建立物件 object literial
    方法跟建立 array 類似
const worker = {job:"developer" , skill:["js" , "css"] };
const profile = {name:"Caden" , age:28};
const mixedInfo = { ...worker , ...profile };

image alt

下篇來談談 arrow function 跟讓人頭痛的 this


上一篇
react 大冒險-快速複習 js 的語法-day 2
下一篇
react 大冒險-快速複習 js 的語法 day 4
系列文
為期 30 天的 react 大冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言